<template>
  <div>
    <preHeader></preHeader>
    <div class="top-block"></div>

    <div class="head-box">
      <div class="money-all">
        <p><span class="symbol">￥</span><span class="number">{{Number(detailsTotal.xiaoshou_fee) + Number(detailsTotal.peixun_fee) + Number(detailsTotal.guanli_fee) + Number(detailsTotal.bole_fee) + Number(detailsTotal.daili_fee)}}</span></p>
        <p class="all-descriptt">累计预估工资（税前）</p>
      </div>

      <div class="money-list">
        <div class="item" :class="{'active':currentSort==1}" @click="active(1)">
          <p><span class="symbol">￥</span><span class="number">{{detailsTotal.xiaoshou_fee}}</span></p>
          <p class="all-descriptt">销售佣金</p>
        </div>
        <div class="item" :class="{'active':currentSort==2}" @click="active(2)">
          <p><span class="symbol">￥</span><span class="number">{{detailsTotal.peixun_fee}}</span></p>
          <p class="all-descriptt">培训津贴</p>
        </div>
        <div class="item" :class="{'active':currentSort==3}" @click="active(3)">
          <p><span class="symbol">￥</span><span class="number">{{detailsTotal.guanli_fee}}</span></p>
          <p class="all-descriptt">团队管理奖</p>
        </div>
        <div class="item" :class="{'active':currentSort==4}" @click="active(4)">
          <p><span class="symbol">￥</span><span class="number">{{detailsTotal.bole_fee}}</span></p>
          <p class="all-descriptt">伯乐奖详情</p>
        </div>
        <div class="item" v-if="detailsTotal.daili_type == 2" :class="{'active':currentSort==5}" @click="active(5)">
          <p><span class="symbol">￥</span><span class="number">{{detailsTotal.daili_fee}}</span></p>
          <p class="all-descriptt">代理佣金</p>
        </div>
      </div>
    </div>
    <mt-navbar v-model="selected">
      <mt-tab-item class="tabItem" id="0" @click.native='tabClick(1)'>全部</mt-tab-item>
      <mt-tab-item class="tabItem" id="1" @click.native='tabClick(0)'>待发放</mt-tab-item>
    </mt-navbar>

    <div class="select">
      <div class="select-date">
        <span>时间筛选</span>
        <span class="date">
          <span class="date-start" @click="openTime">{{year}}-{{month}}-{{date}}</span>至
          <span @click="openTime1" class="date-end">{{year1}}-{{month1}}-{{date1}}</span>
        </span>
        <mt-datetime-picker v-model="dateValue" type="date" ref="datePicker" year-format="{value} 年" month-format="{value} 月"
          date-format="{value} 日" :endDate="new Date()" @confirm="handleConfirm">
        </mt-datetime-picker>
        <mt-datetime-picker v-model="dateValue" type="date" ref="datePicker1" year-format="{value} 年" month-format="{value} 月"
          date-format="{value} 日" :endDate="new Date()" @confirm="handleConfirm1">
        </mt-datetime-picker>
      </div>

      <div class="search">
        <input v-model="phone" placeholder="输入手机号" type="text">
        <span class="search-btn" @click="checkInfo()">查询</span>
      </div>


    </div>






    <mt-tab-container v-model="selected">
      <!-- 全部 -->
      <mt-tab-container-item id="0">
        <!-- 充值列表 -->
        <div class="recharge-list">
          <my-notice v-if="wagesList == '' "></my-notice>
          <div v-else class="recharge-item" v-for="(item,index) in wagesList" :key='index'>
            <p class="item-head">
              <span class="name">{{item.username}}</span>
              <span class="phone">{{item.c_tel}}</span>
            </p>
            <div class="recharge-info">
              <p class="order">订单号：{{item.orderno}}</p>
              <p>充值金额：<span class="symbol">￥</span><span class="number">{{item.cmoney}}</span></p>
              <p>奖励类型：
                <span v-if="item.type == 1">销售佣金</span>
                <span v-if="item.type == 2">培训津贴</span>
                <span v-if="item.type == 3">团队管理奖</span>
                <span v-if="item.type == 4">伯乐奖</span>
                <span v-if="item.type == 5">代理佣金</span>
              </p>
              <p>奖励金额：{{item.fee}}</p>
              <p>备注：{{item.remark}}</p>
            </div>
          </div>

        </div>

      </mt-tab-container-item>

      <!-- 待发放 -->
      <mt-tab-container-item id="1">
        <!-- 充值列表 -->
        <div class="recharge-list">
          <my-notice v-if="wagesList == '' "></my-notice>
          <div v-else class="recharge-item" v-for="(item,index) in wagesList" :key='index'>
            <p class="item-head">
              <span class="name">{{item.username}}</span>
              <span class="phone">{{item.c_tel}}</span>
            </p>
            <div class="recharge-info">
              <p class="order">订单号：{{item.orderno}}</p>
              <p>充值金额：<span class="symbol">￥</span><span class="number">{{item.cmoney}}</span></p>
              <p>奖励类型：
                <span v-if="item.type == 1">销售佣金</span>
                <span v-if="item.type == 2">培训津贴</span>
                <span v-if="item.type == 3">团队管理奖</span>
                <span v-if="item.type == 4">伯乐奖</span>
                <span v-if="item.type == 5">代理佣金</span>
              </p>
              <p>奖励金额：{{item.fee}}</p>
              <p>备注：{{item.remark}}</p>
            </div>
          </div>
        
        </div>

        

      </mt-tab-container-item>


    </mt-tab-container>

  </div>
</template>

<script>
  import {get_wages_details_total,query_wages_list} from '@/api/';
  export default {
    data() {
      return {
        tel:'',
        detailsTotal:'',//预计累计薪资信息
        wagesList:'',//条件查询工资详情列表
        currentSort: 1, //默认显示的active
        selected: '0', //默认显示的选项卡
        dateValue: '',
        year: '2019',
        month: '10',
        date: '12',
        year1: '2019',
        month1: '10',
        date1: '12',
        phone:'',//输入的手机号
      }
    },
    methods: {
      // 切换样式事件
      active(index) {
        this.currentSort = index;
        let startTime = this.year + '-' + this.month + '-' + this.date ;
        let start = new Date(startTime).getTime() / 1000- 8*3600;
        let endTime = this.year1 + '-' + this.month1 + '-' + this.date1 ;
        let end = new Date(endTime).getTime() / 1000 + 3600*16-1;
        query_wages_list({tel:this.tel,start:start,end:end,c_tel:this.phone,type:this.currentSort,is_cutoff:this.selected}).then( res=>{
          console.log(res)
          this.wagesList = res.data;
        })
      },
      tabClick(index){//全部-待发放
        let startTime = this.year + '-' + this.month + '-' + this.date ;
        let start = new Date(startTime).getTime() / 1000- 8*3600;
        let endTime = this.year1 + '-' + this.month1 + '-' + this.date1 ;
        let end = new Date(endTime).getTime() / 1000 + 3600*16-1;
        if(index == 1){
          query_wages_list({tel:this.tel,start:start,end:end,c_tel:this.phone,type:this.currentSort,is_cutoff:index}).then( res=>{
            console.log(res)
            this.wagesList = res.data;
          })
        }else if(index == 0){
          query_wages_list({tel:this.tel,start:start,end:end,type:1,is_cutoff:index}).then(res =>{
            console.log(res)
            this.wagesList = res.data;
          })
        }

      },
      openTime() {//打开起始日期选择面板
        this.$refs.datePicker.open();
        var pickerSlot = document.getElementsByClassName('picker-slot');

      },
      openTime1() {//打开结束日期选择面板
        this.$refs.datePicker1.open();
        var pickerSlot = document.getElementsByClassName('picker-slot');

      },
      defaultDate(){//赋值默认起止日期
        this.tel = JSON.parse(localStorage.getItem('tel'));
        let nowTime = new Date();
        this.year = nowTime.getFullYear();
        this.year1 = nowTime.getFullYear();
        this.month = nowTime.getMonth();
        this.month1 = nowTime.getMonth() + 1;
        this.date = nowTime.getDate();
        this.date1 = nowTime.getDate();
      },
      handleConfirm(value) {
        this.year = value.getFullYear();
        this.month = value.getMonth() + 1;
        this.date = value.getDate();
      },
      handleConfirm1(value) {
        this.year1 = value.getFullYear();
        this.month1 = value.getMonth() + 1;
        this.date1 = value.getDate();
      },
      getDetailTotal(){//获取累计工资信息
        get_wages_details_total({tel:this.tel}).then(res =>{
          console.log(res)
          this.detailsTotal = res.data;
        })
      },
      defaultDetail(){//默认请求工资详情信息
        let startTime = this.year + '-' + this.month + '-' + this.date ;
        let start = new Date(startTime).getTime() / 1000- 8*3600;
        let endTime = this.year1 + '-' + this.month1 + '-' + this.date1 ;
        let end = new Date(endTime).getTime() / 1000+ 3600*16-1;
        query_wages_list({tel:this.tel,start:start,end:end,type:1,is_cutoff:0}).then(res =>{
          console.log(res)
          this.wagesList = res.data;
        })
      },
      checkInfo(){//点击查询
        let startTime = this.year + '-' + this.month + '-' + this.date ;
        let start = new Date(startTime).getTime() / 1000 - 8*3600;
        let endTime = this.year1 + '-' + this.month1 + '-' + this.date1 ;
        let end = new Date(endTime).getTime() / 1000 + 3600*16-1 ;
        query_wages_list({tel:this.tel,start:start,end:end,c_tel:this.phone,type:this.currentSort,is_cutoff:this.selected}).then( res=>{
          console.log(res)
          this.wagesList = res.data;
        })
      }
    },
    mounted() {
      this.defaultDate();
      this.defaultDetail();
      this.getDetailTotal();
    }
  }
</script>

<style scoped>
  .head-box {
    padding: 20px 0;
    background-color: rgb(47, 57, 83);
    color: #fff;
  }

  .money-all {
    text-align: center;
    font-weight: bold;
  }

  .symbol {}

  .number {
    font-size: 30px;
  }

  .money-all .all-descriptt {
    font-size: 12px;
    font-weight: 400;
  }

  .money-list {
    margin-top: 25px;
    display: flex;
    justify-content: space-around;
  }

  .active {
    color: #ff9c4c;
  }

  .item {
    font-size: 12px;
    text-align: center;
  }

  .item .number {
    font-size: 16px;
  }


  /* nav */
  .mint-tab-item-label {
    font-size: 18px;
  }

  .mint-navbar .mint-tab-item {
    padding: 14px 0;
  }

  /deep/ .mint-tab-container-wrap {
    padding: 0em 1em 1em 1em;
  }

  .select {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px;
    margin: 1em 1em 0 1em;
  }

  .select .select-date {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #666;
    border-bottom: 1px solid #ccc;
    padding-bottom: 6px;
  }

  .search input {
    background: #ccc;
    border-radius: 6px;
    border: 1px solid #ccc;
    height: 20px;
    margin-top: 1em;
    padding-left: 10px;
    outline: none
  }

  .search input:focus {
    border-radius: 6px;
    border: 1px solid #ccc;
  }

  .search .search-btn {
    display: inline-block;
    background-color: rgb(47, 57, 83);
    color: #fff;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 4px;
    margin-left: 1em;
  }

  .recharge-list {
    margin-top: 1em;
  }

  .recharge-item {
    font-size: 12px;
    color: #333;
    border: 1px solid #ccc;
    padding: 1em;
    border-radius: 6px;
    margin-bottom: 10px;
  }

  .recharge-item .item-head .phone {
    float: right;
  }

  .recharge-info .number {
    font-size: 14px;
  }
</style>
